<template>
  <view class="preview">
    <swiper circular :current="currentIndex" @change="swiperChange">
      <swiper-item v-for="(item, index) in classlist" :key="item._id">
        <image v-if="readImgs.includes(index)" @click="maskChange" :src="item.picurl" mode="aspectFill"></image>
      </swiper-item>
    </swiper>
    <!-- 遮罩层 -->
    <view class="mask" v-if="isShowMask">
      <view class="goBack" @click="uni.navigateBack(-1)" :style="{ top: getStatusBarHeight() + 'px' }">
        <uni-icons type="back" color="#fff" size="20"></uni-icons>
      </view>
      <!-- 展示图片数量 -->
      <view class="count">{{ currentIndex + 1 }} / {{ classlist.length }}</view>
      <!-- 时间 -->
      <view class="time">
        <uni-dateformat :date="new Date()" format="hh:mm"></uni-dateformat>
      </view>
      <!-- 日期 -->
      <view class="date">
        <uni-dateformat :date="new Date()" format="MM月dd日"></uni-dateformat>
      </view>
      <!-- 底部框 -->
      <view class="footer">
        <view class="box">
          <uni-icons type="info" size="28"></uni-icons>
          <view class="text" @click="clickInfo">信息</view>
        </view>
        <view class="box" @click="clickScore">
          <uni-icons type="star" size="28"></uni-icons>
          <view class="text">{{ detialWall.score }}分</view>
        </view>
        <view class="box" @click="clickDownload">
          <uni-icons type="download" size="23"></uni-icons>
          <view class="text">下载</view>
        </view>
      </view>
    </view>
    <!-- 信息弹窗 -->
    <uni-popup ref="infoPopup" type="bottom">
      <view class="infoPopup">
        <view class="popHeader">
          <view></view>
          <view class="title">壁纸信息</view>
          <view class="close" @click="clickInfoClose"><uni-icons type="closeempty" size="18" color="#999"></uni-icons></view>
        </view>
        <scroll-view scroll-y>
          <view class="content">
            <view class="row">
              <view class="label">壁纸ID：</view>
              <text selectable class="value">{{ detialWall._id }}</text>
            </view>
            <view class="row">
              <view class="label">分类：</view>
              <text selectable class="value class">明星美女</text>
            </view>
            <view class="row">
              <view class="label">发布者：</view>
              <text selectable class="value">{{ detialWall.nickname }}</text>
            </view>
            <view class="row">
              <view class="label">评分</view>
              <view selectable class="value rateBox">
                <uni-rate touchable readonly="true" :value="detialWall.score" size="16" />
                <text class="score">{{ detialWall.score }}分</text>
              </view>
            </view>
            <view class="row">
              <view class="label">摘要</view>
              <view selectable class="value">
                {{ detialWall.description}}
              </view>
            </view>
            <view class="row">
              <view class="label">标签</view>
              <view class="value tabs">
                <view class="tab" v-for="item in detialWall.tabs" :key="item">{{ item }}</view>
              </view>
            </view>
            <view class="coperight">
              声明：本图片来自用户投稿，非商业使用，用于免费学习交流，如侵犯了您的权益，您可以拷贝壁纸ID举报至平台，邮箱Supre_567@outlook.com，管理员将删除侵权壁纸，维护您的权益
            </view>
          </view>
        </scroll-view>
      </view>
    </uni-popup>
    <!-- 评分弹窗 -->
    <uni-popup ref="scorePopup" :is-mask-click="false">
      <view class="scorePopup">
        <view class="popHeader">
          <view></view>
          <view class="title">{{isScore ? '评分过了' : '壁纸评分'}}</view>
          <view class="close" @click="clickScoreClose"><uni-icons type="closeempty" size="18" color="#999"></uni-icons></view>
        </view>
        <view class="content">
          <uni-rate v-model="userScore" allowHalf :disabled="isScore"/>
          <text class="text">{{ userScore }}分</text>
        </view>
        <view class="footer">
          <button @click="submitScore" :disabled="!userScore || isScore" type="default" size="mini" plain>确认评分</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { getStatusBarHeight } from '@/utils/system.js';
import { apiGetDetailWall, apiScore } from '@/api/apis.js';
import { onLoad } from '@dcloudio/uni-app';
const classlist = ref([]);
// 已看过的图片
const readImgs = ref([]);
const storgClasslist = uni.getStorageSync('storageClassList') || [];
classlist.value = storgClasslist.map((item) => {
  return {
    ...item,
    picurl: item.smallPicurl.replace('_small.webp', '.jpg')
  };
});

// 壁纸详情
const currentId = ref(null);
const detialWall = ref({});
const currentIndex = ref(0);
// 图像缓存函数
const readImgsFn = () => {
  readImgs.value.push(
    currentIndex.value === 0 ? classlist.value.length - 1 : currentIndex.value - 1,
    currentIndex.value,
    currentIndex.value === classlist.value.length - 1 ? 0 : currentIndex.value + 1
  );
  readImgs.value = [...new Set(readImgs.value)];
};
onLoad((e) => {
  const { id = null, name = null } = e;
  getDetailWall({ id: e.id });
  currentId.value = id;
  currentIndex.value = classlist.value.findIndex((item) => {
    return item._id === currentId.value;
  });
  readImgsFn();
});

// 滑动动态修改索引
const swiperChange = async (e) => {
  currentIndex.value = e.detail.current;

  // console.log('滑动',e);
  currentId.value = classlist.value[e.detail.current]._id;
  readImgsFn();
  await getDetailWall({ id: currentId.value });
};

// 获取壁纸详情
const getDetailWall = async (data) => {
  const res = await apiGetDetailWall(data);
  // console.log('预览页',res);
  detialWall.value = res.data[0];
  console.log(detialWall.value);
    if(detialWall.value.tabs.length === 0) {
      detialWall.value.tabs.push('暂无')
    }
};
const isShowMask = ref(true);
// 遮罩层状态
const maskChange = () => {
  isShowMask.value = !isShowMask.value;
};

// info弹窗
const infoPopup = ref(null);
function clickInfo() {
  infoPopup.value.open();
}

// 关闭弹窗
const clickInfoClose = () => {
  infoPopup.value.close();
};
// 评分弹窗
const scorePopup = ref(null);
const clickScore = () => {
  console.log(detialWall.value.userScore);
  if(detialWall.value.userScore) {
    isScore.value = true
    userScore.value = detialWall.value.userScore
  }
  scorePopup.value.open();
};
// 关闭评分弹窗
const clickScoreClose = () => {
  scorePopup.value.close();
  userScore.value = 0;
  isScore.value = false
};
// 用户评分
const isScore = ref(false)
const userScore = ref(0);
const submitScore = async () => {
  uni.showLoading({
    title:'加载中'
  })
  // console.log(userScore.value);
  const res = await apiScore({
    classid: detialWall.value.classid,
    wallId: detialWall.value._id,
    userScore: userScore.value
  });
  uni.hideLoading()
  if (res.errCode === 0) {
    uni.showToast({
      title: '评分成功',
      icon: 'none'
    });
    isScore.value = true
    classlist.value[currentIndex.value].userScore = userScore.value
    // console.log('用户评分',classlist.value[currentIndex.value]);
    uni.setStorageSync('storageClassList',classlist.value)
    await getDetailWall({ id: currentId.value });
    
    clickScoreClose();
  }

  // console.log(res);
};
// 下载
const clickDownload = () =>{
  // #ifdef H5
  uni.showModal({
    content:'请长按保存壁纸',
    showCancel:false
  })
  // #endif
  // #ifndef H5
  console.log(detialWall.value.smallPicurl);
  
  console.log('xaizai1');
  uni.getImageInfo({
    src:detialWall.value.smallPicurl,
    success:(res)=> {
      
      uni.saveImageToPhotosAlbum({
        filePath:res.path,
        success:(res)=>{
          console.log(res);
        },
      })
    }
  })
  console.log('xaizai2');
  // #endif
}
</script>

<style lang="scss">
.preview {
  width: 100%;
  height: 100vh;
  position: relative;
  swiper {
    width: 100%;
    height: 100%;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .mask {
    .goBack {
      position: absolute;
      width: 70rpx;
      height: 70rpx;
      background: rgba(0, 0, 0, 0.5);
      left: 30rpx;
      margin-right: 0;
      border-radius: 100px;
      top: 0;
      backdrop-filter: blur(10rpx);
      border: 1rpx solid rgba(255, 255, 255, 0.3);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .count {
      position: absolute;
      top: 10vh;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(10rpx);
      font-size: 28rpx;
      color: #fff;
      border-radius: 40rpx;
      padding: 8rpx 28rpx;
    }
    .time {
      font-size: 140rpx;
      position: absolute;
      top: calc(10vh + 80rpx);
      left: 50%;
      color: #fff;
      transform: translateX(-50%);
      font-weight: 100;
      line-height: 1em;
      text-shadow: 0 4rpx rgba(0, 0, 0, 0.3);
    }
    .date {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      color: #fff;
      font-size: 34rpx;
      top: calc(10vh + 230rpx);
      text-shadow: 0 4rpx rgba(0, 0, 0, 0.3);
    }
    .footer {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 10vh;
      background: rgba(255, 255, 255, 0.8);
      width: 65vw;
      height: 120rpx;
      color: #000;
      display: flex;
      border-radius: 120rpx;
      justify-content: space-around;
      align-items: center;
      box-shadow: 0 2rpx 0 rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(20rpx);
      .box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2rpx 12rpx;
        .text {
          font-size: 26rpx;
          color: $text-font-color-2;
        }
      }
    }
  }

  .popHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      color: $text-font-color-2;
      font-size: 26rpx;
    }
    .close {
      padding: 6rpx;
    }
  }
  // 信息弹窗
  .infoPopup {
    background: #fff;
    padding: 30rpx;
    border-radius: 30rpx 30rpx 0 0;
    overflow: hidden;

    scroll-view {
      max-height: 60vh;
      .content {
        .row {
          display: flex;
          padding: 16rpx 0;
          font-size: 32rpx;
          line-height: 1.7em;
          .label {
            color: $text-font-color-3;
            width: 140rpx;
            font-size: 30rpx;
          }
          .value {
            flex: 1;
            width: 0;
          }
          .rateBox {
            display: flex;
            align-items: center;
            // gap: 10rpx;
            .score {
              font-size: 26rpx;
              color: $text-font-color-2;
              padding-left: 20rpx;
            }
          }
          .tabs {
            display: flex;
            flex-wrap: wrap;
            .tab {
              border: 1px solid $brand-theme-color;
              color: $brand-theme-color;
              font-size: 22rpx;
              padding: 10rpx 30rpx;
              border-radius: 40rpx;
              line-height: 1em;
              margin: 0 10rpx 10rpx 0;
            }
          }
          .class {
            color: $brand-theme-color;
          }
        }
        .coperight {
          font-size: 28rpx;
          padding: 20rpx;
          background: #f6f6f6;
          color: #666;
          border-radius: 10rpx;
          margin: 20rpx 0;
          line-height: 1.6em;
        }
      }
    }
  }

  // 评分弹窗
  .scorePopup {
    background: #fff;
    padding: 30rpx;
    width: 70vw;
    border-radius: 30rpx;
    .content {
      padding: 30rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      .text {
        color: #ffca3e;
        padding-left: 10rpx;
        width: 80rpx;
        line-height: 1em;
        text-align: left;
      }
    }
    .footer {
      padding: 10rpx 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
